<template>
  <!--头部查询组件2（查询，重置，新增，带展开收起功能）-->
  <div class="m-query-form">
    <div class="btn-right" ref="referenceUnit">
      <slot name="col-button">
        <Button type="primary" :loading="loading" @click="submit" class="f-mr10" v-if="isQuery">查询</Button>
        <Button v-if="isReset" @click="reset" class="f-mr10">重置</Button>
        <!-- <Button v-if="isAdd" @click="add" class="f-ml8">新增</Button> -->
      </slot>
      <!-- <span v-if="isExpandBtn">
        <Button type="text" v-if="hasExpandBtn" @click="expand" >
          {{isExpanded?'收起':'展开'}}<Icon :type="isExpanded? 'ios-arrow-up' : 'ios-arrow-down'" />
        </Button>
      </span>-->
    </div>
    <div class="m-query-line" ref="queryLine">
      <slot name="col-form"></slot>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
import { get } from "lodash";
export default {
  name: "query",
  props: {
    //是否有新增按钮
    isAdd: {
      type: Boolean,
      default: false
    },
    //是否显示重置按钮
    isReset: {
      type: Boolean,
      default: true
    },
    //是否显示展开、收起按钮
    isExpandBtn: {
      type: Boolean,
      default: true
    },
    //是否展开
    isExpandedShow: {
      type: Boolean,
      default: false
    },
    //有些页面查询按钮并非居右显示，隐藏
    isQuery: {
      type: Boolean,
      default: true
    }
  },
  components: {},
  computed: {
    ...mapState({ orgNoList: state => state.admin.fourMenu.orgNoList })
  },
  watch: {
    isExpanded(val) {
      this.isExpanded = val;
      this.$emit("update:isExpanded", val);
    }
  },
  data() {
    return {
      loading: false,
      showHeight: "", // 显示高度
      formHeight: "", // 最大高度
      hasExpandBtn: false,
      isExpanded: this.isExpandedShow // 展开
    };
  },
  mounted() {
    // this.ajustFormFrame()
  },

  methods: {
    /**
     *  domRender后进行调整
     */
    ajustFormFrame() {
      const muti = this.$refs.queryLine.querySelectorAll(".ivu-row");
      const unit =
        muti && muti.length && muti[0] ? muti[0].scrollHeight || 35 : 35;
      this.showHeight = unit + "px";
      if (muti.length <= 1) {
        return;
      }
      this.hasExpandBtn = true;
    },
    expand() {
      this.isExpanded = !this.isExpanded;
    },
    reset() {
      this.$emit("reset");
      this.$emit("update:orgNo", get(this.orgNoList, "[0].id"));
    },

    submit() {
      console.log;
      this.$emit("query");
    },
    //新增
    add() {
      this.$emit("add");
    }
  }
};
</script>

<style lang="scss" scoped>
.m-query-line {
  // // padding-bottom: 1px;
  // box-sizing: content-box;
  // padding-top: 1px;
}
.m-query-line /deep/ .ivu-select-input {
  height: 28px;
  line-height: 28px;
}
.grid-panel {
  /deep/ .ivu-row {
    margin-top: 20px;
    &:first-child {
      margin-top: 0;
    }
  }

  /deep/ .ivu-col {
    padding-right: 20px;
    &:last-child {
      padding-right: 0;
    }
  }
}

.m-query-form {
  padding: 15px 15px 0 15px;
  .m-query-line {
    height: auto;
    overflow: hidden;
  }

  .ivu-btn-text {
    outline: 0;
    border: 0;
    box-shadow: none;
    &:hover {
      outline: 0;
      border: 0;
      box-shadow: none;
    }

    &:focus {
      outline: 0;
      border: 0;
      box-shadow: none;
    }
  }
}
.btn-right {
  padding-right: 10px;
  button:last-child {
    margin-right: 0 !important;
  }
}
// 表单元素样式
/deep/.m-query-line {
  .vue-treeselect__control {
    border-radius: 4px;
    line-height: 26px !important;
    height: 26px !important;
  }
  .vue-treeselect__placeholder {
    color: #bdbdbd;
    height: 28px;
    line-height: 28px !important;
  }
  // .ivu-select-input{
  //   height:28px;
  //   line-height:28px;
  // }

  .vue-treeselect__control {
    input[type="text"]:focus,
    input[type="password"]:focus,
    select:focus {
      border-color: transparent !important;
      -webkit-box-shadow: none !important;
      box-shadow: none !important;
    }
    // :focus, input[type="password"]:focus, select:focus, textarea:focus
  }
  .ivu-form-item-content {
    line-height: 28px;
    height: 28px;
    .ivu-date-picker {
      width: 100%;
    }
  }
  .vue-treeselect__single-value {
    line-height: 26px !important;
  }
  .ivu-form .ivu-form-item-label {
    line-height: 28px;
    height: 28px;
    padding: 1px 12px 0px 0;
  }
  .ivu-select-single .ivu-select-selection .ivu-select-placeholder,
  .ivu-select-single .ivu-select-selection .ivu-select-selected-value {
    height: 28px;
    line-height: 28px;
  }
  .ivu-select-single .ivu-select-selection {
    height: 28px;
  }
  .ivu-input {
    height: 28px;
    border-radius: 4px;
  }
  .ivu-input-prefix i,
  .ivu-input-suffix i {
    line-height: 28px;
  }
  .ivu-btn-icon-only {
    height: 28px;
    line-height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .ivu-form .ivu-row-flex {
    margin: -20px 0 0 0;
    > * {
      margin-top: 20px;
    }
  }
}
.m-query-form {
  .ivu-btn {
    height: 28px;
    > span {
      line-height: 1;
    }
  }
}
</style>
